<template>
  <div class="mop">
    <sm-web-map :map-options="mapoptions" @load="load">
      <sm-tdt-map-switcher
          :data="{ tk: '1d109683f4d84198e37a38c442d68311' }"
          :collapsed="false"
      ></sm-tdt-map-switcher>
    </sm-web-map>

    <el-button style="float: right; padding: 3px 0" type="text" @click="changTime()">更多 >></el-button>
  </div>

</template>

<script>
import VueiClient from '@supermap/vue-iclient-mapboxgl';
import Vue from 'vue';
import * as api from "../api/api"
import {success_code} from "@/api/api";
Vue.use(VueiClient);
export default {
  name: 'HelloWorld',
  data(){
    return{
      dataSat:'',
      mapoptions: {
        center: [113.24318, 34.08141],
        zoom: 6,
        style: {
          version: 8,
          sources: {
            baseLayer: {
              type: 'raster',
              tiles: [
                'https://t0.tianditu.gov.cn/img_w/wmts?tk=fd322ddf917bd1d34ee7aa36903f9738&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
              ],
              tileSize: 256,
            },
            labelLayer: {
              type: 'raster',
              tiles: [
                'https://t0.tianditu.gov.cn/cia_w/wmts?tk=fd322ddf917bd1d34ee7aa36903f9738&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}',
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: 'baseLayer',
              type: 'raster',
              source: 'baseLayer',
              minzoom: 0,
              maxzoom: 18,
            },
            {
              id: 'labelLayer',
              type: 'raster',
              source: 'labelLayer',
              minzoom: 0,
              maxzoom: 18,
            },
          ],
        },
        renderWorldCopies: false,
      },
    }
  },
  methods: {
    changData(result){
      // this.createLayer("2024-06-25 00:00:00")
      const geojson = {
        type: 'FeatureCollection',
        features: []
      };

      result.data.forEach(item => {
        // 为每条数据创建一个 Feature 对象
        const feature = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [
              parseFloat(item.longitude), // 经度
              parseFloat(item.latitude)    // 纬度
            ]
          },
          properties: {
            id: item.id,
            reflectivity: parseFloat(item.reflectivity), // 反射率
            createTime: item.createTime,
            updateTime: item.updateTime
          }
        };
        geojson.features.push(feature);

      });
      this.dataSat=geojson



    },
    createLayer(time_1){
      api.listRadarsByTime(time_1).then(result=>{
        if (result.code === success_code) {
          // 定义 GeoJSON 结构
          this.changData(result)
          this.map.addLayer({
            id: "dataset",
            type: 'circle',
            source: {
              type: 'geojson',
              data: this.dataSat,
            },
            paint: {
              'circle-color': {
                property: "reflectivity",
                type: 'exponential',
                stops: [
                  [0, '#008000'],    // 暗绿色，属性值最低
                  [1, '#00A000'],   // 较暗的绿色
                  [2, '#00C200'],   // 中等绿色
                  [3, '#00FF00'],   // 鲜艳的绿色
                  [3.5, '#ADFF2F'],   // 黄绿色
                  [4, '#FFFF00'],   // 黄色
                  [4.5, '#FFDE00'],   // 较深的黄色
                  [5, '#FFC800'],   // 金黄色，过渡到红色
                  [6, '#FFA500'],   // 橙黄色
                  [7, '#FF8C00'],   // 深橙色
                  [15, '#FF0000'],   // 红色
                  [20, '#CC0000'],   // 深红色
                  [60, '#990000']   // 暗红色，属性值最高
                ],
              },
              'circle-opacity':0.2
            },
          })

        }
      })
    },
    load(e) {
      console.log('------------>'+e.map)

      this.map = e.map
      // this.loadRainData(this.map, this.currentTime.dataset)
      this.createLayer('2024-02-20 00:00:00')
    },



  },



};
</script>

<style>
.mop{width:100%;
height: 1800px}
</style>